<template>
	<view style="width: 750upx;background-color: #FEFEFE;margin-top: 20upx;" >
        <view style="height: 30upx;"></view>
        <view class="titlename"> {{data.title}} </view>
        <view class="time">{{data.time}}</view>
		<u-parse :content="data.text" @preview="preview" @navigate="navigate" className="html" />
       <!-- <rich-text :nodes="data.text" ></rich-text> -->
       <view class=""  style="margin-top: 30upx;background-color:#fefefe ;">
        <view class="title">
            <text class="sum">共{{ data.commentNum}}评论</text>
        </view>
        <view   class="content"  v-for = "(items,index) in comments" :key="items.id">
            <view class="solid-bottom contents "   :class="items.istouch?'contents':'touch'" @longtap="huifu(index)">
                <view class="" >
                     <image :src="items.postHeadPortrait" class="cu-avatar round" style="margin-top: 20upx;"></image>
                </view>
               
                 <view class="zhuti">
                     <text style="color:#999999 ;font-size: 30upx;margin-left: 30upx;">{{items.postUsername}}</text>
                     <view style="color: #333333;font-size: 35upx;margin-left: 30upx;">{{items.message}} </view>
                     <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">{{items.time}} </text>
                     
                     
                         
                        <view  v-if ="items.biaozhi === 1">
                        <view class="huifu"  v-for = "itemg in items.list">    
                            
                            <view class="">
                             <view class="title2">
                                  <image :src="itemg.postHeadPortrait" mode="" class="cu-avatar round" ></image>
                                   <text style="color:#999999;font-size: 30upx;margin-right: 30upx;margin-left: 20upx;">{{itemg.postUsername}}</text>
                                   <view class='cu-tag round' style="color: #007AFF;" v-show="itemg.biaoqian">作者</view>
                             </view>
                           <view style="color: #333333;font-size: 35upx;margin-left: 100upx
                           ;">{{itemg.message}} <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">{{itemg.time}}</text></view>
                         </view>
                         
                         </view>
                        </view> 
                         
                         
                         <view  v-if = "items.biaozhi === 0">
                             
                             <view class=""  v-if=" items.zhankai === 0">
                                 <view class="huifu">
                                 <view class="">
                                <view class="title2">
                                     <image :src="items.list[0].postHeadPortrait" mode="" class="cu-avatar round" ></image>
                                      <text style="color:#999999;font-size: 30upx;margin-right: 30upx;margin-left: 20upx;">{{items.list[0].postUsername}}</text>
                                     <view class='cu-tag round' style="color: #007AFF;" v-show="items.list[0].biaoqian">作者</view>
                                </view>
                              <view style="color: #333333;font-size: 35upx;margin-left: 100upx
                              ;">{{items.list[0].message}} <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">{{items.list[0].time}} </text></view>
                              
                               <view class="yincang">
                                <text @click="zhangkai(index)">展开{{items.changdu}}条回复</text>
                            </view>
                            <view style="margin-bottom: 30upx;"></view>
                              
                            </view>
                           
                             </view>
                             </view>
                             
                            <view class=""  v-else>
                                
                                <view class="huifu"  v-for = "itemg in items.list">    
                                    
                                    <view class="">
                                     <view class="title2">
                                          <image :src="itemg.postHeadPortrait" mode="" class="cu-avatar round" ></image>
                                           <text style="color:#999999;font-size: 30upx;margin-right: 30upx;margin-left: 20upx;">{{itemg.postUsername}}</text>
                                           <view class='cu-tag round' style="color: #007AFF;" v-show="itemg.biaoqian">作者</view>
                                     </view>
                                   <view style="color: #333333;font-size: 35upx;margin-left: 100upx
                                   ;">{{itemg.message}} <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">{{itemg.time}}</text></view>
                                 </view>
                                 
                                 </view>
                                <view class="yincang">
                                    <text @click="shouqi(index)">收起{{items.changdu}}条回复</text>
                                </view>
                            </view> 
                             
                              
                         </view>
     
                 </view>
                 <view class="images" @tap="dianzan(index)">
                     <image :src="items.dianzantupian" mode="" class="aixin"   ></image>
                     <text class="dianzanshu" :class="{dianzanlo:items.jude}">{{items.thumbs}}</text>
                 </view>
            </view>
           <!-- <view class="contents solid-bottom">
               <view class="" style="width: 65upx;">
                    <image src="../../static/goal/senver.jpg" class="cu-avatar round" style="height: 100upx;"></image>
               </view>
              
               <view class="zhuti">
                    <text style="color:#999999 ;font-size: 30upx;margin-left: 30upx;">张叔叔</text>
                    <view style="color: #333333;font-size: 35upx;margin-left: 30upx;">佩服佩服 <text style="color:#999999;font-size: 25upx;margin-left: 20upx;">今天 &nbsp;14:30 </text></view>
                    <view style="margin-bottom: 30upx;"></view>
                </view>
                <view class="images">
                    <image src="../../static/goal/eight.jpg" mode="" class="aixin"></image>
                    <text class="dianzanshu">32</text>
                </view>
                <view  style="margin-bottom: 30upx;"></view>
           </view> -->
        </view>
        <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
        
    </view>
       
      <view style="height: 120upx;width: 750upx;"></view> 
       
       <view class="mui-bar mui-bar-tab dibu">
        <view class="cu-bar bg-white" style="width: 550upx;" @tap="huifulo">
        	<view class="search-form round">
        		<input type="text" placeholder="说点什么" confirm-type="send" @input="searchIcon" placeholder-class="logos" disabled="true"></input>
        	</view>
        </view>
        <view style="width: 100upx;">
          <image :src="dianzangg" mode="aspectFit" style="height: 70upx;width: 70upx;margin-left;margin-top: 12.5upx;" @click.stop="change"></image>  
        </view>
       
       <view style="width: 100upx;">
           <image src="../../static/goal/eleven.jpg" mode="aspectFit" style="height: 70upx;width: 70upx;margin-left;margin-top: 12.5upx;"></image>
       </view>
    </view>

	</view>
    
</template>


<script>
  import uParse from '@/components/gaoyia-parse/parse.vue'
  
	export default {
        components:{
            uParse
        },
		data() {
			return {
				data:{},
                 comments:[],
                 loadMoreText: "加载中...",
                showLoadMore: false,
                max:0,
                id:"",
                pageNum:1,
                dianzangg:"../../static/index/aixin.png",
                jude:0
                
			}
		},
		methods: {
            huifulo(){
                 
                  let id = this.id
                   let name = '快来发表你的看法吧~~'
                    
                        uni.navigateTo({
                    url:"../huifu/huifu"+"?id="+id+"&name="+name+"&type=1"+"&commenttype=0"
                });    
             
            },
     preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    },
    
    huifu(index){
        
        console.log(this.comments[index].message)
        
        var message = this.comments[index].message;
        var name = this.comments[index].postUsername;
        var id = this.comments[index].iD;
        
        
       plus.nativeUI.actionSheet(
		{title:"操作",
		cancel:"取消",
		buttons:[
			{
				title:"回复评论"
			},{
				title:"复制评论内容"
				}
		]},
		function(e){
            
             
             
             if(e.index === 2){
                            
                   		uni.showToast({
                   			title:"内容复制成功",
                   			icon:"none"
                   		})
                        
                       
                        
                        uni.setClipboardData({
                data: message,
                success: function () {
                    console.log('success');
                }
            })
                        
                   	}  if(e.index === 1){
                        
                     uni.navigateTo({
    url:"../huifu/huifu"+"?id="+id+"&name="+name+"&type=1"+"&commenttype=1"
});
               
                }
		}
        
        
	);
       
       
       
        
    },
    

    getData(id,pageNum,c){
        
        console.log(pageNum)

         
        this.$api.test({
            url:"setgoals/GetConsultComment",
            data:{
                id:id,
                pageNum:pageNum,
                pageLimit:6}
        }).then((res) =>{
            
              if(res.data.status == 500){
                   uni.showToast({
                      title: '数据获取失败',
                      duration: 2000,
                      icon:"none",
                      position:"center"
                      
                  });
                  return;
              }  
                if(c.comments.length ==0){
                    
                   console.log(res.data)
                 
                 c.comments = res.data
                 
                 for(let i = 0 ; i< res.data.length; i++){
                     
                    
                   
                       c.comments[i].dianzantupian = "../../static/index/aixin.png";
                       
                       c.comments[i].istouch = true;
                       
                        c.comments[i].jude = 0;
                       
                         c.comments[i].changdu  = res.data[i].list.length - 1;
                if(res.data[i].list.length > 1){
                     c.comments[i].biaozhi = 0;
                       c.comments[i].zhankai = 0;
                    
                }else{
                     c.comments[i].biaozhi = 1;
                }
                
                   }  
                    
                    
                }else{
                    
                   var length = c.comments.length
                   	c.comments = c.comments.concat(res.data);  
                       console.log(c.comments.length);
                    
                 console.log(res.data)
              
                  for(let i = length ; i< c.comments.length; i++){
                 
                        c.comments[i].dianzantupian = "../../static/index/aixin.png";
                        
                         c.comments[i].istouch = true;
                        
                         c.comments[i].jude = 0;
                        
                          c.comments[i].changdu  = c.comments[i].list.length - 1;
                 if(c.comments[i].list.length > 1){
                      c.comments[i].biaozhi = 0;
                        c.comments[i].zhankai = 0;
                     
                 }else{
                      c.comments[i].biaozhi = 1;
                 }
                 
                    }        
                    
                }    
                
            
        }) 
         
         
         
         
            
    },
    setDate() {
       
       	this.max += 4;
       this.pageNum = this.pageNum + 1;
       this.getData(this.id,this.pageNum,this);
       },     
       zhangkai(i){
           console.log(i)
           console.log( this.comments[i].zhankai)
           var x = this.comments[i];
           x.zhankai = 1;
           
           Vue.set(this.comments,i, x)
          
           console.log("120")
     
       },
       shouqi(i){
           console.log(i)
           console.log( this.comments[i].zhankai)
           var x = this.comments[i];
           x.zhankai = 0;
           
           Vue.set(this.comments,i, x)
                         
           console.log("120")
           
           
       },
       dianzan(index){
           
      const c = this;     
    var id = this.comments[index].iD
    var jude = this.comments[index].jude
           
           if(jude === 0) {
               
               this.dianzans(id,jude,function(data){
                   
                   var x = c.comments[index] ;
                    x.dianzantupian = "../../static/index/dizan.png"
                    x.istouch = false
                   x.jude = 1;
                  x.thumbs = data.thumb;
                     c.comments.splice(index, 1, x); 
                   
               })
               
           }else{
                this.dianzans(id,jude,function(data){
                   
                   var x = c.comments[index] ;
                    x.dianzantupian = "../../static/index/aixin.png"
                     x.istouch = false
                   x.jude = 0;
                  x.thumbs = data.thumb;
                     c.comments.splice(index, 1, x); 
                   
               })
           }
         
             
       },
       dianzans(id,jude,diaoyong){
           
           this.$api.test({
             "url":"setgoals/SetConsultCommentThumb",
             data:{
                 id:id,
                 jude:jude
             }
           }).then((res) =>{
                 diaoyong(res.data) ;
           })
    
          
       },
       change(){
           
           var c = this;
           console.log(c.jude)
           
           var jude = this.jude
           if(jude === 0){
               
               this.$api.test({
                 url:'setgoals/SetThumb',
                 data:{
                     id:c.id,
                     type:"consult",
                     jude: jude
                 }
               }).then((res) =>{
                  console.log(res.data)
                   c.dianzangg = "../../static/index/dizan.png";
                   c.jude = 1;
                    uni.showToast({
                   	title:"点赞成功",
                   	icon:"none"
                   })
               })
               
               
   
              
           }else{
               
               
               this.$api.test({
                   url:"setgoals/SetThumb",
                   data:{
                       id:c.id,
                       type:"consult",
                       jude:jude
                   }
               }).then((res) =>{
                   console.log(res.data)
                    c.dianzangg  = "../../static/index/aixin.png";
                    c.jude = 0;
                    uni.showToast({
                    	title:"点赞已取消",
                    	icon:"none"
                    })
               })
               
           
               
           }
           
       }
    
  }	,
			onLoad(option) {
			
			console.log(option);
          this.id = option.id
		
		},
         onReachBottom() {
        	console.log("onReachBottom");
        	if (this.max > this.data.commentNum) {
        		this.loadMoreText = "没有更多数据了!"
        		return;
        	}
        	this.showLoadMore = true;
        	setTimeout(() => {
        		this.setDate();
        	}, 300);
        },
        onShow() {
            
            var c =this;
            
            this.$api.test({
              url:"setgoals/GetDetailed",
              data:{
              	type:"consult",
              	id:c.id
              }
            }).then((res) =>{
               console.log(res.data);
                          
                  c.data = res.data.consult;
                  
                  var str = res.data.consult.text
                 c.data.text  =  str.replace(/[\\]/g,'').replace(/style="width=100%"/g,'style="width=100%;height:200upx;margin-bottom:20upx;margin-top:20upx"').replace(/<p>/g,'<p style="margin-top:30upx">');  
                
                 console.log(c.data.text)
                 
                 uni.setNavigationBarTitle({
                       title:c.data.title
                   });
            })
             
            
            this.pageNum = 1;
            this.comments = [];
            this.max = 0;
    this.getData(this.id,this.pageNum,this);
    
    
        }
	}
</script>

<style>
.html{
    width: 750upx;
    background-color: #FEFEFE;
    color: #333333;
    margin-left: 30upx;
    margin-right: 30upx;
    width: 690upx;
}
.port{
    width: 750rpx;
    margin-top: 30upx;
    background-color: #fefefe;
}
.text{
    margin-left: 30upx;
    margin-right: 30upx;
    width: 690upx;
    color: #333333;
    font-weight: 800;
    font-size: 40upx;
    margin-top: 20upx;
}
.texts{
    margin-left: 30upx;
    margin-right: 30upx;
    width: 690upx;
    color: #333333;
    font-size: 35upx;
}
.image{
    margin-left: 30upx;
    margin-right: 30upx;
    width: 690upx;
    display: flex;
    flex-direction: row;
}
.bottom{
    
    margin-top: 30upx;
    height: 130upx;
    display: flex;
    flex-direction: row;
}
.left{
    margin-left: 30upx;
    display: flex;
    flex-direction: column;
    color:#999999;
    width:500upx;
}
.button{
    height: 70upx;
    font-size: 30upx;
    border-radius: 10upx;
    background-color: #FFB400;
}
.sum{
    color:#666666;
    font-size:35upx;
    margin-left: 30upx; 
}
.title{
   margin-top: 20upx;
}
.content{
    padding-top: 20upx;
    padding-left: 30upx;
    width: 750upx;
}
.contents{
    display: flex;
    flex-direction: row;
    padding-bottom: 30upx;
}
.images{
    display: flex;
    flex-direction: column;
   
}
.dianzanshu{
    color: #333333; font-size: 30upx;
    margin-left: 10upx;
    margin-top: -5upx;
}
.aixin{
    width: 45upx;
    height: 45upx;
    
}
.zhuti{
    display: flex;
    flex-direction: column;
    width: 550upx;
    margin-bottom: 20upx;
}
.title2{
    display: flex;
    flex-direction: row;
    margin-top: 10upx;
    margin-left: 20upx;
}
.yincang{
    margin-left: 100upx;
    color:#358dbd;
    font-size: 30upx;
}
.dibu{
    background-color:#FEFEFE;
    display: flex;
    flex-direction: row;
    width: 750upx;
}
.mui-bar
    {
        position: fixed;
        z-index: 10;
        right: 0;
        left: 0;
    
        height: 100upx;
        padding-right: 10px;
        padding-left: 10px;
    
        border-bottom: 0;
        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
                box-shadow: 0 0 1px rgba(0, 0, 0, .85);
    
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
 }
 .mui-bar-tab
 {
     bottom: 0;
 
     width: 100%;
     height: 50px;
     padding: 0;
 
     border-top: 0;
     border-bottom: 0;
 
     -webkit-touch-callout: none;
 }
 .logos{
     margin-left: 30upx;
     color: #666666;
     font-size: 30upx;
 }
 .dianzanlo{
     
    font-size: 30upx;
     margin-left: 10upx;
     margin-top: -5upx;
     color: #0081FF;
 }
 .time{
    color: #999999;
     margin-left: 30upx;
 }
 .titlename{
     color: #333333;
     font-weight: 800;
      margin-left: 30upx;
      font-size: 40upx;
 }
 
 .content:active{
    background-color: #DBDBDB;
 }

</style>
